<template>
	<el-container>
		<el-header>
			<Header></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Aside></Aside>
			</el-aside>
			<el-main>
				<h3 style="text-align:center;">文章列表</h3>

				<el-form :inline="true" :model="search" class="demo-form-inline"
					style="width:99%;margin:0 auto;text-align:center;">
					<el-form-item label="ID">
						<el-input v-model="search.itemid"></el-input>
					</el-form-item>

					<el-form-item label="分类">
						<el-select v-model="search.catid">
							<el-option :key="0" :value="0" label="请选择">请选择</el-option>
							<el-option :key="item.catid" :value="item.catid" :label="item.catname"
								v-for="item in category_select">
								{{'&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(item.lev)+'┖─&nbsp;'+item.catname}}
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="标题">
						<el-input v-model="search.title"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="search.flag">
							<el-option label="请选择" value="0"></el-option>
							<el-option v-for="item in $core_enums('flag')" :key="item.key" :label="item.value"
								:value="item.key"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="to_search">查询</el-button>
						<el-button type="warning" @click="to_reset">重置</el-button>
						<el-button type="success" @click="to_export">导出Excel</el-button>
					</el-form-item>
				</el-form>

				<el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"
					style="width:99%;margin:0 auto;" border>
					<el-table-column type="selection" width="55"></el-table-column>

					<el-table-column prop="itemid" label="ID" width="180"></el-table-column>

					<el-table-column prop="cat_pos" label="分类" width="180">
						<template slot-scope="scope">
							<span v-html="scope.row.cat_pos"></span>
						</template>
					</el-table-column>

					<el-table-column prop="title" label="标题" width="180">
						<template slot-scope="scope">
							<a href="javascript:void(0);"
								@click="handlePreview(scope.$index, scope.row)">{{ scope.row.title }}</a>
						</template>
					</el-table-column>

					<el-table-column prop="addtime" label="添加时间"></el-table-column>

					<el-table-column prop="edittime" label="编辑时间"></el-table-column>

					<el-table-column prop="username" label="添加人"></el-table-column>

					<el-table-column prop="editor" label="编辑人"></el-table-column>

					<el-table-column prop="flag" label="状态"></el-table-column>

					<el-table-column align="right">
						<template slot="header" slot-scope="scope">操作</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div style="width:90%;margin:0 auto;text-align:center;">
					分类：
					<el-select v-model="batch.catid">
						<el-option :key="0" :value="0" label="请选择">请选择</el-option>
						<el-option :key="item.catid" :value="item.catid" :label="item.catname"
							v-for="item in category_select">
							{{'&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(item.lev)+'┖─&nbsp;'+item.catname}}
						</el-option>
					</el-select>
					<el-button type="success" @click="batch_update_catid">选中项修改分类</el-button>状态：
					<el-select v-model="batch.flag">
						<el-option label="请选择" value="0"></el-option>
						<el-option v-for="item in $core_enums('flag')" :key="item.key" :label="item.value"
							:value="item.key"></el-option>
					</el-select>
					<el-button type="success" @click="batch_update_flag">选中项修改状态</el-button>
				</div>
				<br />
				<el-pagination background :total="total" :page-size="20" :current-page.sync="search.page"
					@current-change="handleCurrentChange" style="text-align:center;"></el-pagination>
				<br />
				<br />

				<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
					<span>正在导出Excel，当前进度：{{export_percent}}</span>
					<span v-if="show_download">
						<a :href="download_url">下载</a>
					</span>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="dialogVisible = false">关闭</el-button>
					</span>
				</el-dialog>
			</el-main>
		</el-container>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		async onLoad(query) {
			let data_category = await this.$axios.post("/api/article/category_lst");
			this.category_select = data_category.data;
			this.load_data();
		},
		data() {
			return {
				search: {
					page: 1,
					itemid: "",
					catid: 0,
					title: "",
					flag: "0"
				},
				category_select: [],
				loading: false,
				tableData: [],
				total: 0,
				checked_items: [],
				batch: {
					catid: 0,
					flag: "0"
				},
				dialogVisible: false,
				export_percent: "",
				show_download: false,
				download_url: ""
			};
		},
		async mounted() {

		},
		methods: {
			handleSelectionChange(val) {
				this.checked_items = val;
			},
			//加载数据
			load_data(cb) {
				this.loading = true;
				this.$axios
					.post("/api/article/lst", {
						page: this.search.page,
						itemid: this.search.itemid,
						catid: this.search.catid,
						title: this.search.title,
						flag: this.search.flag
					})
					.then(data => {
						this.loading = false;
						this.tableData = data.data.rows;
						this.total = data.data.total;
						if (cb) {
							cb();
						}
						this.$forceUpdate();
					})
					.catch(error => {
						this.loading = false;
						this.$message.error(error.toString());
					});
			},
			//分页点击
			handleCurrentChange(page) {
				this.search.page = page;
				this.load_data();
			},
			//搜索
			to_search() {
				var c = 0;
				if (parseInt(this.search.itemid) > 0) {
					c++;
				}
				if (parseInt(this.search.catid) > 0) {
					c++;
				}
				if (this.search.title.length > 0) {
					c++;
				}
				if (parseInt(this.search.flag) > 0) {
					c++;
				}
				if (!c) {
					this.$message.error("请输入搜索条件！");
					return;
				}
				this.search.page = 1;
				this.load_data();
			},
			//重置
			to_reset() {
				this.search = {
					page: 1,
					itemid: "",
					catid: 0,
					title: "",
					flag: "0"
				};
				this.load_data();
			},
			//导出Excel
			to_export() {
				let request = async (filename, page) => {
					try {
						let data = await this.$axios.post("/api/article/lst", {
							is_export: 1,
							filename: filename,
							page: page,
							itemid: this.search.itemid,
							catid: this.search.catid,
							title: this.search.title,
							flag: this.search.flag
						});

						this.dialogVisible = true;
						this.export_percent = data.data.progress;
						if (data.data.status) {
							this.show_download = true;
							this.download_url = data.data.browser_path;
							return;
						}
						//下一页
						request(data.data.filename, page + 1);
					} catch (error) {
						this.$message.error(error.toString());
					}
					return true;
				};

				this.export_percent = "";
				this.show_download = false;
				this.download_url = "";
				request("", 1);
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			//预览
			handlePreview(index, row) {
				uni.navigateTo({
					url:`/pages/article/preview?itemid=${row.itemid}`
				})
			},
			//编辑
			handleEdit(index, row) {
				uni.navigateTo({
					url: `/pages/article/mod?itemid=${row.itemid}`
				})
			},
			//删除
			handleDelete(index, row) {
				uni.navigateTo({
					url: `/pages/article/del?itemid=${row.itemid}`
				})
			},
			//批量更新
			batch_update_catid() {
				if (!this.checked_items.length) {
					this.$message.error("请勾选数据！");
					return;
				}
				if (!parseInt(this.batch.catid)) {
					this.$message.error("请选择状态！");
					return;
				}
				var itemids = this.checked_items.map(function(v, k) {
					return v.itemid;
				});
				this.$axios
					.post("/api/article/batch_update", {
						action: "catid",
						itemids: itemids,
						catid: this.batch.catid
					})
					.then(data => {
						if (parseInt(data.code) > 0) {
							this.batch.catid = 0;
							this.$message({
								type: "success",
								message: "操作成功!"
							});
							setTimeout(() => {
								this.load_data();
							}, 500);
						} else {
							this.$message({
								type: "error",
								message: "操作失败!"
							});
						}
					})
					.catch(error => {
						this.$message.error(error.toString());
					});
			},
			batch_update_flag() {
				if (!this.checked_items.length) {
					this.$message.error("请勾选数据！");
					return;
				}
				if (!parseInt(this.batch.flag)) {
					this.$message.error("请选择状态！");
					return;
				}
				var itemids = this.checked_items.map(function(v, k) {
					return v.itemid;
				});
				this.$axios
					.post("/api/article/batch_update", {
						action: "flag",
						itemids: itemids,
						flag: this.batch.flag
					})
					.then(data => {
						if (parseInt(data.code) > 0) {
							this.batch.flag = "0";
							this.$message({
								type: "success",
								message: "操作成功!"
							});
							setTimeout(() => {
								this.load_data();
							}, 500);
						} else {
							this.$message({
								type: "error",
								message: "操作失败!"
							});
						}
					})
					.catch(error => {
						this.$message.error(error.toString());
					});
			}
		}
	};
</script>

<style scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
	}

	.el-main {
		
		color: #333;
		
	}
</style>
